<template>
	<div id="passGameDetail">
		<!-- <div>闯关详情</div> -->
		<div class="basicInfo">
			<div class="basicInfo_title">基本信息</div>
			<div style="width:100%;height:0.02rem;background-color:#f3f2f2">
				<div style="margin-left:0.55rem;width:0.86rem;height:0.02rem;background-color:#3885f8"></div>
			</div>
			<table class="basicInfo_table" cellspacing="10">
				<thead class="thead">
				</thead>
				<tbody class="tbody">
					<tr>
						<td>机构名称： <span class="basicInfo_schoolName">{{basicInfo.schoolName}}</span></td>
						<td>负责人： <span class="basicInfo_content">{{basicInfo.userName}}</span></td>
					</tr>
					<tr>
						<td>手机号： <span class="basicInfo_content">{{basicInfo.userPhone}}</span></td>
						<td>合作类型： <span class="basicInfo_content">{{basicInfo.cooperationMode}}</span></td>
					</tr>
					<tr>
						<td>合作时间： <span class="basicInfo_content">{{basicInfo.cooperationDate}}</span></td>
						<td>跟进人： <span class="basicInfo_content">{{basicInfo.followUserName}}</span></td>
					</tr>
				</tbody>
			</table>
			<div style="width:100%;height:0.02rem;background-color:#f3f2f2">
			</div>
		</div>
		<div class="bottom">
			<div class="answerInfo">
				<div class="answerInfo_title">闯关详情</div>
				<div style="width:100%;height:0.02rem;background-color:#f3f2f2">
					<div style="margin-left:0.55rem;width:0.86rem;height:0.02rem;background-color:#3885f8"></div>
				</div>
				<table class="answerInfo_table" cellspacing="10">
					<thead class="thead">
					</thead>
					<tbody class="tbody">
						<tr>
							<td>当前阶段： <span class="answerInfo_curpoint">{{basicInfo.curCheckPointName}}</span></td>
							<td>任务成就： <span class="answerInfo_honor">{{basicInfo.solvedTitleNum}}/{{basicInfo.totalTitleNum}}</span></td>
							<td>排名： <span class="answerInfo_topnum">{{basicInfo.topNum}}</span></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="period">
				<div class="period_status">
					<el-row :gutter="0" align="middle" type="flex" justify="space-between" style="width:100%">
						<el-col v-for="(item,index) in passGameInfo.checkPointSet" :key="index">
							<div class="period_div" :style="backgroundImgById(item, index)"
								 @click="(index <= curIndex) && openPeriod(item.checkPointId)">
								<div class="period-img"></div>
								<div class="period-finish" v-if="index < curIndex">已通关</div>
								<div class="period-locktext" v-if="index > curIndex">未解锁</div>
								
								<!--进行中的关卡-->
								<template v-if="index == curIndex">
									<div class="period-num">{{item.solvedTitleNum}}/{{item.totalTitleNum}}</div>
									<el-progress :stroke-width=12 :percentage="item.totalTitleNum?item.solvedTitleNum/item.totalTitleNum*100:0" :show-text=false></el-progress>
								</template>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="period_step">
					<el-steps :active="parseInt(passGameInfo.curCheckPointId-1)" align-center>
						<el-step v-for="(item,index) in passGameInfo.checkPointSet" :key="index" :title="item.checkPointName" description=""></el-step>
					</el-steps>
				</div>
			</div>
			<div class="question-content">
				<template v-for="(item,index) in questionList">
					<div v-for="questionItem in item.data" class="question-content-item">
						<div class="question-content-item-title">{{questionItem.childrenName}}</div>
						<div :class="[checkFinished(questionItem.data)?'question-content-item-div-finish':(computeQuestionItemPercent(questionItem.data)==0?'question-content-item-div-notstart':'question-content-item-div-ing')]" @click="handleQuestionItemClick(questionItem.data,questionItem.childrenName+':'+item.childrenName)">
							<div class="question-content-item-bigtitle">{{item.childrenName}}</div>
							<div v-if="computeQuestionItemPercent(questionItem.data)!=0" class="question-content-item-process">
								<div class="question-content-item-process-icon"></div>
								<label style="display: inline-block;">任务完成：</label>
								<label v-if="checkFinished(questionItem.data)">{{questionItem.updatedTime}}</label>
								<el-progress v-if="computeQuestionItemPercent(questionItem.data)!=0 && !checkFinished(questionItem.data)" class="question-content-item-process-progress" color="#32d376" :stroke-width=8 :percentage="computeQuestionItemPercent(questionItem.data)"></el-progress>
							</div>
							<div v-if="checkFinished(questionItem.data)" class="question-content-item-status"></div>
							<div class="question-content-item-connect" @click.stop="handleConnectClick()"></div>
						</div>
						<div v-if="checkHasFileUrl(questionItem.data)" class="question-content-item-file">
							<span v-if="!questionItem.downTime">文件下载：未下载</span>
							<span v-else>文件下载：{{questionItem.downTime}}</span>
						</div>
					</div>
				</template>
			</div>
		</div>
		<answerQuestionContent ref="answerQuestionContent"></answerQuestionContent>
	</div>
	</div>
</template>
<script>
	import answerQuestionContent from './answer_question_content'

	var vm, user;
	export default {
		components: {
			answerQuestionContent
		},
		data: function() {
			return {
				basicInfo: {},
				questionList: [],
				passGameInfo: { //当前用户等级信息
					userId: '',
					userName: '',
					curCheckPointId: '1',
					curCheckPointName: '筹备期',
					curHonorId: '1',
					curHonorName: '青铜',
					solvedTitleNum: 21,
					totalTitleNum: 180,
					topNum: 3,
					checkPointSet: [],
				},
				curIndex: -1,
				checkPointId: null
			}
		},
		methods: {
			backgroundImgById: function(item, index) {
				//根据序号判断是否完成,设置图片前缀
				let prefix = "period_unlock_bg";
				if(index < vm.curIndex) {
					prefix = "period_finish";
				}
				if(index > vm.curIndex) {
					prefix = "period_lock_bg";
				}
				//获取图片
				let img = require('@/assets/img/answer_system/' + prefix + item.honorId + '.png');
				//返回背景样式
				return { backgroundImage: 'url(' + img + ')' }
			},
			checkFinished: function(data) {
				for(let i = 0; i < data.length; i++) {
					if(!data[i].isSel) {
						return false;
					}
				}
				return true;
			},
			checkHasFileUrl: function(data) {
				for(let i = 0; i < data.length; i++) {
					if(data[i].isHasFile) {
						return true;
					}
				}
				return false;
			},
			computeQuestionItemPercent: function(data) {
				var count = 0;
				for(let i = 0; i < data.length; i++) {
					if(data[i].isSel) {
						count++;
					}
				}
				if(data.length == 0)
					return 100;
				if(count == data.length) {
					return 100;
				} else {
					return Math.round(count / data.length * 100);
				}
			},
			openPeriod: function(id) {

				let param = {
					userId: vm.passGameInfo.userId,
					evaItemId: id,
					evaTypeId: vm.passGameInfo.evaTypeId
				}
				//向后台获取状态
				api.passGameQuestionList(param).then(function(data) {
					//console.log(JSON.stringify(data))
					var msg;
					vm.questionList = data.list;
					for(let i = 0; i < vm.questionList.length; i++) {
						let data = vm.questionList[i].data;
						for(let j = 0; j < data.length; j++) {
							let dataarr = data[j].data;
							for(let k = 0; k < dataarr.length; k++) {
								dataarr[k].isEditor = dataarr[k].isSel;
							}
						}

					}
				});
			},
			handleQuestionItemClick: function(item, title) {
				vm.$refs.answerQuestionContent.init(item, title, false);
			},
			handleConnectClick: function() {
				// e.stopPropagation();
			},
			init: function(item) {
				vm.basicInfo = item;

				api.passGameInfo({
					userId: vm.basicInfo.userId,
					orgId: user.orgId
				}).then(function(data) {
					
					vm.setCurIndex(data);
					vm.passGameInfo = data;
					vm.openPeriod(data.curCheckPointId);
				});
			},
			setCurIndex : function(data) {
				//记录阶段Id数组
				let ids = [];
				data.checkPointSet.forEach(function(item) {
					ids.push(item.checkPointId);
				});
				//当前关卡序号
				vm.curIndex = ids.indexOf(data.curCheckPointId);
				
				if(vm.curIndex >= 0) {
					//还未全部通关,设置新的当前关卡id
					vm.checkPointId = data.curCheckPointId;
				} else {
					//当前序号不在序号数组里,代表全部通关
					vm.curIndex = ids.length;
				}
			}
		},
		created: function() {
			vm = this;
			user = tool.getItem(lsKey.user, true);
		}
	}
</script>
<style lang="scss">
	#passGameDetail {
		.el-progress {
			postion: relative;
			width: 54%;
			margin: 0 auto;
			top: 0.42rem;
		}
		.el-progress-bar__outer {
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
		}
		.el-progress-bar__inner {
			background-color: #28acff;
		}
		.el-step__head.is-finish {
			color: #3885f8;
			border-color: #3885f8;
		}
		.el-step__title.is-finish {
			color: rgb(51, 51, 51);
		}
		.el-step__title.is-wait {
			color: rgb(102, 102, 102);
		}
		.el-steps--horizontal {
			margin-top: 0.15rem;
		}
		.el-step.is-horizontal .el-step__line {
			height: 0.08rem;
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
			background-color: transparent;
			/*box-shadow: 0rem 0rem 0.15rem -0.032rem #0f7845;*/
		}
		.el-step__line-inner {
			height: 0.02rem;
			background-color: #3885f8;
			margin-top: 0.02rem;
		}
		.el-step__icon.is-text {
			border: 0.03rem solid white;
			box-shadow: 0rem 0rem 0.15rem -0.03rem #3885f8;
			background-color: #d3e1ea;
		}
		.is-finish .el-step__icon.is-text {
			background-color: #3885f8;
			color: white;
		}
		.period_div_highlight {
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(~@/assets/img/answer_system/highlight_bg.png);
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 78% 78%;
			margin: 0 auto;
			top: 0rem;
			z-index: 2;
		}
	}
</style>
<style lang="scss" scoped src="@/style/answer_system/passGame_detail.css"></style>